<!--
 * @Description: 边框组件9
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-09-07 18:00:52
 * @LastEditTime: 2020-09-08 14:41:06
-->
<template>
    <div class="border-box-9">
        <svg class="border-svg-container"
             :width="width"
             :height="height">
            <defs>
                <linearGradient :id="gradientId"
                                x1="0%"
                                y1="0%"
                                x2="100%"
                                y2="100%">
                    <animate attributeName="x1"
                             values="0%;100%;0%"
                             dur="10s"
                             begin="0s"
                             repeatCount="indefinite" />
                    <animate attributeName="x2"
                             values="100%;0%;100%"
                             dur="10s"
                             begin="0s"
                             repeatCount="indefinite" />
                    <stop offset="0%"
                          :stop-color="color[0]">
                        <animate attributeName="stop-color"
                                 :values="`${color[0]};${color[1]};${color[0]}`"
                                 dur="10s"
                                 begin="0s"
                                 repeatCount="indefinite" />
                    </stop>
                    <stop offset="100%"
                          :stop-color="color[1]">
                        <animate attributeName="stop-color"
                                 :values="`${color[1]};${color[0]};${color[1]}`"
                                 dur="10s"
                                 begin="0s"
                                 repeatCount="indefinite" />
                    </stop>
                </linearGradient>
                <mask :id="maskId">
                    <polyline stroke="#fff"
                              stroke-width="3"
                              fill="transparent"
                              :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`" />
                    <polyline fill="#fff"
                              :points="`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3 ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}`" />

                    <polyline stroke="#fff"
                              stroke-width="3"
                              fill="transparent"
                              :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`" />
                    <polyline fill="#fff"
                              :points="`${width * 0.52}, 3 ${width * 0.58}, 3 ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9`" />
                    <polyline fill="#fff"
                              :points="`${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1} ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9`" />

                    <polyline stroke="#fff"
                              stroke-width="3"
                              fill="transparent"
                              :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`" />
                    <polyline fill="#fff"
                              :points="`8, ${height * 0.55} 8, ${height * 0.7} 2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}`" />

                    <polyline stroke="#fff"
                              stroke-width="3"
                              fill="transparent"
                              :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`" />
                    <polyline fill="#fff"
                              :points="`${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8} ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}`" />
                </mask>
            </defs>
            <polygon :fill="backgroundColor"
                     :points="`
                        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
                        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
                        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
                        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
                        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
                        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
                    `" />
            <rect x="0"
                  y="0"
                  :width="width"
                  :height="height"
                  :fill="`url(#${gradientId})`"
                  :mask="`url(#${maskId})`" />
        </svg>
        <div class="border-box-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import autoResize from '../mixin/autoResize'
import { getRanId } from '@/utils/myUtils'

export default {
    name: 'borderBox9',
    mixins: [autoResize],
    props: {
        color: {
            //线条色
            type: Array,
            default: () => ['#11eefd', '#0078d2'],
            validator(val) {
                return val.length >= 2 //限制颜色为双色
            },
        },
        backgroundColor: {
            //背景色
            type: String,
            default: 'transparent',
        },
    },
    data() {
        const id = getRanId()
        return {
            gradientId: `border-box-9-gradient-${id}`,
            maskId: `border-box-9-mask-${id}`,
        }
    },
}
</script>

<style lang="scss" scoped>
.border-box-9 {
    position: relative;
    width: 100%;
    height: 100%;

    .border-svg-container {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
    }

    .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
}
</style>
